<script>
import TimeQuery from './TimeQuery'
import echarts from 'echarts'
import { getKeliuInfos } from 'services/x-start/mgr/common'

export default {
  components: { TimeQuery },
  data() {
    return {
      formData: {},
      keliuInfo: { people: {}, saturation: {} },
    }
  },
  created() {
    this.getKeliuInfos()
  },
  methods: {
    update(to) {
      this.getKeliuInfos(to && to.params && to.params.id)
    },
    getKeliuInfos(id) {
      getKeliuInfos({ ...this.formData, type: id || this.$route.params.id })
        .then(res => {
          this.keliuInfo = res
          this.init()
        })
        .catch(({ payload }) => {
          this.$message.error(payload && payload.msg)
        })
    },
    init() {
      let people = this.keliuInfo
      let keys = Object.keys(people)
      this.draw({
        ref: 'charts1',
        // name: '实时运动人数',
        legend: Object.keys(people),
        x: Object.keys(people[keys[0]]),
        series: this.getSeries(),
        type: 'bar',
      })
      // let saturation = this.keliuInfo.saturation
      // let keys1 = Object.keys(this.keliuInfo.saturation)
      // this.draw({
      //   ref: 'charts2',
      //   // name: '实时运动人数',
      //   legend: Object.keys(saturation),
      //   x: Object.keys(saturation[keys1[0]]),
      //   series: [
      //     {
      //       name: keys1[0],
      //       type: 'line',
      //       stack: '总量',
      //       data: Object.values(saturation[keys1[0]]),
      //     },
      //     {
      //       name: keys1[1],
      //       type: 'line',
      //       stack: '总量',
      //       data: Object.values(saturation[keys1[1]]),
      //     },
      //   ],
      //   type: 'bar',
      // })
    },
    getSeries() {
      let arr = []
      for (const key in this.keliuInfo) {
        let obj = {}
        arr.push({
          name: key,
          type: 'line',
          stack: '总量',
          data: Object.values(this.keliuInfo[key]),
        })
      }
      return arr
    },
    draw({ ref, name = '', x = [], series = [], legend = [] }) {
      let dom = echarts.init(this.$refs[ref])
      dom.setOption({
        title: {
          text: name,
          x: 'center',
        },
        legend: {
          data: legend,
          selectedMode: 'single',
        },
        color: ['#ED7D31', '#4573C4'],
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: x,
          axisLine: {
            lineStyle: {
              color: '#999', // 颜色
            },
          },
        },
        yAxis: {
          type: 'value',
        },
        series: series,
      })
    },
    typechange(data) {
      this.formData = data
      this.getKeliuInfos({
        ...this.formData,
        type: this.$route.params.id,
      })
    },
  },
}
</script>

<template lang="pug">
  .content
    .warehouse
      .title 客流分析
      TimeQuery(@typechange="typechange")
      .draw(ref="charts1")
    //- .warehouse
    //-   .title 饱和度及集流力
    //-   .draw(ref="charts2")
</template>
<style lang="stylus" scoped>
.content
  .warehouse
    background-color #fff
    padding 10px 20px
    margin-bottom 20px
    box-sizing border-box
    text-align left
    .text
      color #5c5c5c
      line-height 2em
      .time
        >p
          display inline-block
    .draw
      height 70vh
    .title
      color #424857
      font-size 16px
      position relative
      padding-left 20px
      line-height 36px
      border-bottom 1px solid #e3e6ec
      text-align left
      &:after
        content ''
        display block
        width 3px
        height 16px
        top 50%
        left 0
        margin-top -8px
        background-color #FF6D60
        position absolute
@media screen and (max-width: 650px)
  .content
    .warehouse
      .draw
        height 300px
</style>
